<template>
  <div class="edit-box">
    <!-- <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>颜色</th>
        </tr>
      </thead>
      <draggable
        v-model="list"
        tag="tbody"
        :move="checkMove"
        v-loading="loading"
        @end="onEnd"
      >
        <transition-group>
          <tr v-for="d in list" :key="d.id">
            <td>{{ d.id }}</td>

            <td @dblclick="edit(d.id, 'name')">
              <input
                type="text"
                :value="d.name"
                v-if="d.id === activeItem.id && activeItem.field === 'name'"
                @blur="save"
              />
              <span v-else>{{ d.name }}</span>
            </td>

            <td @dblclick="edit(d.id, 'color')">
              <input
                type="text"
                :value="d.color"
                v-if="d.id === activeItem.id && activeItem.field === 'color'"
                @blur="save"
              />
              <span v-else>{{ d.color }}</span>
            </td>
          </tr>
        </transition-group>
      </draggable>
    </table> -->

    <div class="table-box">
      <draggable
        v-model="list"
        v-loading="loading"
      >
        <transition-group name="lists" tag="div">
          <ul v-for="d in list" :key="d.id">
            <li>{{ d.id }}</li>

            <li @dblclick="edit(d.id, 'name')">
              <input
                type="text"
                :value="d.name"
                v-if="d.id === activeItem.id && activeItem.field === 'name'"
                @blur="save"
              />
              <span v-else>{{ d.name }}</span>
            </li>

            <li @dblclick="edit(d.id, 'color')">
              <input
                type="text"
                :value="d.color"
                v-if="d.id === activeItem.id && activeItem.field === 'color'"
                @blur="save"
              />
              <span v-else>{{ d.color }}</span>
            </li>
          </ul>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
export default {
  components: { Draggable },
  data() {
    return {
      // 双击要进行编辑哪条数据的 id 和字段
      activeItem: {
        id: "",
        field: "",
      },

      loading: false, // 在进行排序请求后台数据的时候，出现 loading 图标
    };
  },
  computed: {
    // 计算属性的对象写法，支持 set 和 get
    list: {
      // 读取（插值绑定的时候）这个计算属性的时候调用
      get() {
        return this.$store.state.statusList;
      },
      // 如果给这个计算属性赋值，就会执行 set，赋的值会作为 set 的参数
      set(value) {
        // set() {
        // console.log('vvv', value);
        // this.$store.commit('setStatusList', value);
        this.setOrder(value);
      },
    },
  },
  methods: {
    save(event) {
      const val = event.target.value; // 失焦时input框的内容
      const { id, field } = this.activeItem; // 通过结构赋值的方式，拿到失焦框的id和类型字段
      const row = this.$store.state.statusList.find((i) => i.id === id); // 通过id拿到 $store 里面的那条数据

      this.axios
        .post("/status-edit", {
          type: "pre",
          ...row,
          [field]: val,
        })
        .then((data) => {
          if (!data.code) {
            this.$notify({
              title: "编辑保存成功",
              type: "success",
            });

            this.$store.commit(
              "setStatusList",
              this.$store.state.statusList.map((i) => ({
                ...i,
                [field]: i.id === id ? val : i[field],
              }))
            );

            this.activeItem.id = "";
            this.activeItem.field = "";
          }
        })
        .catch(() => {
          this.$notify.error({
            title: "编辑保存错误",
          });
        });

      // console.log(this.$store.state.statusList);
    },
    edit(id, field) {
      this.activeItem = { id, field };
    },
    setOrder(list) {
      // this.$store.commit("setStatusList", list);
      this.loading = true;
      this.axios
        .post("/status-order", {
          type: "pre",
          ids: list.map((i) => i.id),
        })
        .then((data) => {
          if (!data.code) {
            this.$store.commit("setStatusList", list);
            this.$notify({
              title: "排序保存成功",
              // message: "这是一条成功的提示消息",
              type: "success",
            });

            this.loading = false;
          }
        });
    },
  },
  mounted() {
    console.log(this._)
  }
};
</script>

<style lang="sass">
.edit-box
  table
    border-collapse: collapse
    width: 100%
    tr:hover td
      background: #ddd
    th, td
      line-height: 40px
      text-align: center
      border-bottom: 1px solid #eee
      width: 33.33%
    td
      transition: .3s
      input
        height: 30px
        padding: 0 5px
        border: 1px solid #ccc
        border-radius: 4px
        outline: none
    th
      color: #999

  .table-box
    ul
      display: flex
      &:hover
        background: #eee
      li
        flex: 1
        line-height: 40px
        text-align: center
        border-bottom: 1px solid #eee
.lists-move
  transition: transform .3s
</style>
